<template>

	<view class="article-css">
		<!-- #ifndef MP -->
		<view class="StatusBarHeightCss"></view>
		<!-- 固定在顶部的导航栏 -->
		<!-- 搜索导航 -->
		<view class="nav-bar">
			<view class="nav-bar-img">
				<image src="../../static/img/index1/u53.png" mode=""></image>
			</view>
			<view class="nav-bar-right">
				<uni-icon type="bars" size="22" color="#666666"></uni-icon>
			</view>
		</view>
		<view class="status-placeholder-top"></view>
		<view class="status-placeholder-buttom"></view>
		<!-- #endif -->


		<view class="seg-padding-wrap" >
			<uni-segmented-control :current="currentItem" :values="items" v-on:clickItem="onClickItem" styleType="text"
			 activeColor="#d4010e"></uni-segmented-control>
		</view>

		<view class="item-content">
			<view v-show="currentItem === 0">
				<article-list :articleItems="articleItems" @onClickItem="onClickArticleItem"></article-list>
			</view>
			<view v-show="currentItem === 1">
				选项卡2的内容
			</view>
		</view>

	</view>

</template>

<script>
	import uniIcon from "components/uni-icon.vue"
	import uniSegmentedControl from 'components/uni-segmented-control.vue';
	import articleList from "components/templates/article-list.vue";
	export default {
		components: {
			uniIcon,
			uniSegmentedControl,
			articleList,
		},
		data() {
			return {
				items: [
					"最新",
					"笔记",
					"随笔",
					"新诗",
					"字画",
					"故事"
				],
				currentItem: 0,
				loadingType: 1,
				articleItems: [{
						id:123,
						iconURL: "/static/img/index1/u86.png",
						name: "诗悦",
						className: "- 随笔 -",
						tag: "# 春日絮语 #",
						content: "金石不言自有声。是以，我们给这枚安静的小鹿印章取名「鹿语」。在「鹿语」推出之时，我们最想说的是一声感谢。感谢朋友们再三敦促，让我们积攒起动力，推出此单品。也感谢朋友们耐心等待，你们在屏幕另一端敲下的文字，字字句句都是暖心的鼓励。",
						imgs: [
							"/static/img/index1/u128.jpg",
							"/static/img/index1/u129.jpg",
							"/static/img/index1/u130.jpg",
							"/static/img/index1/u131.jpg",
						],
						ts: "刚刚",
						pinglun: 12,
						like: "35"
					},
					{
						id:123,
						iconURL: "/static/img/index1/u86.png",
						name: "诗悦",
						className: "- 笔记 -",
						tag: "",
						content: "面朝大海，春暖花开。大海的深邃、青瓷的温润、茶汤的甘醇，悠然的情怀都在里头， 愿以如此纯粹的方式，融入您的生活，与您长情相伴。",
						imgs: [
							"/static/img/index1/u90.png",
							"/static/img/index1/u91.png",
						],
						imgURL: "",
						ts: "1小时前",
						pinglun: 12,
						like: "35"
					},
					{
						id:123,
						iconURL: "/static/img/index1/u112.png",
						name: "乔子翎",
						className: "- 新诗 -",
						title: "夜合花·庐州思",
						tag: "",
						content: "昨夜诗成，酒酣凭醉，睡中一梦庐州。吴门久客，怯将软语藏收。不登古津楼。怕为乡人误为游。唱黄梅调，余音未了，水已推舟。 离家已隔三秋。见亲朋，却如云月含羞。心中脉脉，无言总被人偷。往事问还休。点穿泪囊落东流。纵归来晚，依稀记得，那日回眸。",
						imgs: [
							"",
							"",
							""
						],
						imgURL: "/static/img/index1/u114.jpg",
						ts: "昨天",
						pinglun: 12,
						like: "35"
					}
				]
			}
		},
		methods: {
			onClickItem(index) {
				console.log("item:" + index);
				if (this.currentItem !== index) {
					this.currentItem = index;
				}
				this.currentItem = 0
			},
			onClickArticleItem(item){
				// console.log(item);
				uni.navigateTo({
					url:"/pages/article/article-detail?id="+item.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.article-css {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		width: 100%;
		// border: 1px solid red;
	}

	.article-css {

		.nav-bar {
			position: fixed;
			background-color: #FFFFFF;
			top: var(--status-bar-height);
			display: block;
			height: 44px;
			text-align: center;
			width: 100%;
			border-bottom: 1px solid rgba(242, 242, 242, 1);

			// border: 1px solid red;
		}

		.nav-bar-img {
			margin: auto;
			position: absolute;
			top: 50%;
			left: 0;
			bottom: 0;
			right: 0;
			height: 44px;
		}

		.nav-bar-right {
			// background-color: red;
			text-align: right;
			top: 50%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			transform: translateY(50%);
			margin-right: 20px;
			// border: 1px solid red;
		}

		.nav-bar-img image {
			width: 67px;
			height: 21px;
		}


		.seg-padding-wrap {
			width: 690upx;
			padding: 10upx 30upx;
			background-color: rgba(242, 242, 242, 255);
			color: #333;
		}

		.media-list {
			border-bottom: 1upx solid #e2e2e2;
		}
	}
</style>
